<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/ajax.js"></script>
</head>

<body>
    <button class="get">get</button>
    <button class="post">post</button>
</body>
<script>
    /*
        http get和post的区别
        1. 一般情况下 get常用于获取数据, post常用于发送数据  =>   get也可以在请求时携带数据(发送数据)
        2. 以get方式传递数据时,将参数数据队列拼接在地址栏之后,用 ? 分隔
           以post方式传递数据时,利用http post传输机制,将数据放在请求主体中在header传递,地址栏看不到
        3. 以get方式发送请求时,传输速度较快, post相对较慢
        4. 以get方式发送请求时 数据在地址栏可见, 安全性不高 , post存放请求主体中随header传递 安全性较高
        5. get方式传递数据时不能超过4k(中文可能会被编码)  post传递数据时默认不受限制


        get方式传参

        post方式传参
    */

    var getBtn = document.getElementsByClassName("get")[0];
    var postBtn = document.getElementsByClassName("post")[0];

    // 以get方式传递数据时,将参数数据队列拼接在地址栏之后,用 ? 分隔
    getBtn.onclick = function () {
        // 第一个请求
        // 判断用户名是否存在?
        var wd = "";  // 搜素的关键词 默认请求所有
        var col = "id"; // 排序的列名 默认id排序
        var type = "asc"; // 排序的方式 默认升序
        var page = 1;  // 页码 默认显示第一页
        var size = 10; // 每页显示多少条 默认(10)

        ajax({
            // type: "get",
            url: "http://43.138.81.225/demo/php/searchGoodsOrderLimit.php",
            data: {
                wd: wd,
                col,
                type,
                page,
                size
            },
            // async:true,
            dataType: "json",
            success: function (res) { // 形参 res 请求成功时的数据
                console.log("请求成功", res);
            }
        })



    }

    postBtn.onclick = function () {
        var user = "asasdd123123";
        var pwd = "123123";
        var phone = "17386153331";
        var email = "143332@qq.com";

        // debugger;
        ajax({
            type: "post",
            url: "http://43.138.81.225/demo/php/register.php",
            data: {
                user,
                pwd,
                phone,
                email,
            },
            async: true,
            dataType: "json",
            success: function (res) {
                console.log("请求成功", res);
            }

        })
    }


</script>

</html>